/*
 * Copyright 2015-2016 Imply Data, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

// __________________
// |_________D______|
// |   |_____B______|
// | A |            |
// |   |     C      |
// |   |            |
// |   |            |
// ------------------
//
// A : left-panel
// B : title-bar
// B + C : main-panel
// C : content (mostly up to the subviews)
// D : settings-header-bar

.settings-header-bar {
  @include pin-top($header-height);
}


.left-panel {
  @include unpin-top($header-height);

  width: $left-panel-width;
  padding: 10px 5px;

  background-color: $background-brand-light;

  button {
    background-color: transparent;
    display: block;
    width: 100%;
    height: 35px;
    text-align: left;

    &.icon {
      padding-left: 38px;

      .svg-icon {
        position: absolute;
        top: 8px;
        left: 12px;

        path {
          fill: $white;
        }
      }
    }

    &:hover {
      background-color: rgba($brand, 0.4);
    }

    &:active {
      color: $white;
    }

    &.active {
      background-color: $brand;
      color: $white;
    }
  }
}

.main-panel {
  @include unpin-top($header-height);
  left: $left-panel-width;
  background-color: $white;

  &.full-width {
    left: 0;
  }
}

.title-bar {
  height: $title-bar-height;
  background-color: $white;
  border-bottom: 1px solid $border-extra-light;
  padding-left: 24px;

  .title {
    font-size: 17px;
    margin-top: 18px;
  }

  // Allows placement of one single button or of a group
  > .button-group,
  > .button.save,
  > .button.cancel,
  > .button.add {
    position: absolute;
    top: 12px;
    right: 24px;
  }

  .button-group .button:not(:last-child) {
    margin-right: 10px;
  }

  .button.back {
    cursor: pointer;
    width: 30px;
    margin-top: 12px;
    margin-right: 15px;
  }

  > * {
    display: inline-block;
  }
}

.content {
  @include unpin-top($title-bar-height);
  overflow-y: auto;

  padding: 24px 24px;

  .tab-content {
    overflow: auto;

    .immutable-list {
      position: absolute;
      top: 5px;
      bottom: 5px;
      left: 24px;
      right: 0;
    }
  }
}
